<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>凭证录入</title>

    <!-- 引入 css -->
    <link href="/admin/plugin/wangEditor/style.css" rel="stylesheet">
    <!-- 引入 js -->
    <script src="/admin/plugin/wangEditor/index.js"></script>

    <!--引入 element-ui 的样式，-->
    <link rel="stylesheet" href="/admin/plugin/element-ui/index.css">
    <!-- 必须先引入vue，  后使用element-ui -->
    <script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
    <!-- 引入element 的组件库-->
    <script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>

    <script type="text/javascript" src="/admin/plugin/element-ui/httpVueLoader.js"></script>

    <!--引入layui组件-->
    <link rel="stylesheet" href="/admin/plugin/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
    <script src="/admin/plugin/layui/dist/layui.js" charset="utf-8"></script>

    <script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/mx1.0.js?v=1.1"></script>
    <link rel="stylesheet" href="/admin/js-css/css/backColor.css" media="all">

    <link rel="stylesheet" href="/admin/js-css/css/pageLR.css">

    <style>
        .changeLHight .el-form-item__label{
            line-height: 16px !important;
        }
        .el-progress-bar__outer{
            background-color: #909399;
        }
    </style>

</head>
<body>

<div id="app" style="padding-top: 10px;">



    <el-form size="small"  :inline="true"  >
        <el-form-item label="帐薄："  >
            <el-input  v-model="formData['zb']" style="'width:200px;'" ></el-input>
        </el-form-item>

        <el-form-item label="核算组织："  >
            <el-input  v-model="formData['hszz']"  disabled="true" style="'width:200px;'" ></el-input>
        </el-form-item>

        <el-form-item label="凭证字："  >
            <el-input  v-model="formData['pzz']"  style="'width:200px;'" ></el-input>
        </el-form-item>

        <el-form-item label="凭证号："  >
            <el-input  v-model="formData['pzh']"   style="'width:200px;'" ></el-input>
        </el-form-item>

        <el-form-item label="附件数："  >
            <el-input  v-model="formData['fjs']"   style="'width:200px;'" ></el-input>
        </el-form-item>

        <el-form-item label="会计年度："  >
            <el-input  v-model="formData['year']"   style="'width:200px;'" ></el-input>
        </el-form-item>

        <el-form-item label="会计期间："  >
            <el-input  v-model="formData['qj']"   style="'width:200px;'" ></el-input>
        </el-form-item>



        <el-form-item label="日期："  >
            <el-date-picker  v-model="formData['rq']" type="date" value-format="yyyy-MM-dd" style="'width:200px;'" ></el-date-picker>
        </el-form-item>
        <el-form-item label="业务日期："  >
            <el-date-picker  v-model="formData['ywrq']" type="date" value-format="yyyy-MM-dd" style="'width:200px;'" ></el-date-picker>
        </el-form-item>

    </el-form>

    <div style="color: red;">
        说明:选择的收款数据缴费日期的年度小于等于当前年度的,将计入应收科目,对应的科目编码为1122.02.02;<br/>
        选择的数据大于当前年度的,将计入预收科目,如果是办公供热费,商业供热费则对应的科目为2203.05.05.04,<br/>
        如果是住宅供热费 ,则对应的科目为2203.14.04.04,过水热和开栓费对应2203.08科目;欠费信息计入应收帐款1122.02.02中.
    </div>

    <div>
        <div style="padding-bottom: 5px;margin-top: 16px;">
            <el-button type="primary" size="small" @click="openshoukuan" >选择收款明细</el-button>
            <el-button type="primary" size="small" @click="openqianfei" >选择欠费明细</el-button>
            <el-button type="primary" size="small" @click="deleteRows" >删除行</el-button>

        </div>
        <template>
            <el-table
                    ref="tipsTable"
                    :data="tableData"
                    @selection-change="handleSelectionChange"
                    @row-click="rowClick"
                    border
                    max-height="500"
                    style="width: 100%">
                <el-table-column
                        type="selection">
                </el-table-column>

                <el-table-column
                        prop="fyxx"
                        width="260px"
                        label="房源信息">
                </el-table-column>

                <el-table-column
                        prop="zhaiyao"
                        width="260px"
                        label="摘要">
                    <template slot-scope="scope">
                        <el-input  v-model="scope.row.zhaiyao"  style="'width:200px;'" ></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="kmbm"
                        width="160px"
                        label="科目编码">
                    <template slot-scope="scope">
                        <el-input  v-model="scope.row.kmbm"   style="'width:200px;'" ></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="hswd"
                        width="450px"
                        label="核算维度">
                    <template slot-scope="scope">
                        <template v-if="scope.row.kmbm == '1122.02.02'" >
                            <el-form  :inline="true"  >
                                <el-select style="width: 130px;" v-model="scope.row.xqid" filterable  >
                                    <el-option  ></el-option>
                                    <el-option :value="vm.bm"  :label="vm.name" v-for="vm in formData['list1']">{{vm.name}}</el-option>
                                </el-select>
                                <el-select style="width: 130px;" v-model="scope.row.dlid" filterable  >
                                    <el-option  ></el-option>
                                    <el-option :value="vm.bm"  :label="vm.name" v-for="vm in formData['list2']">{{vm.name}}</el-option>

                                </el-select>
                                <el-select style="width: 130px;" v-model="scope.row.fjid" filterable   >
                                    <el-option  ></el-option>
                                    <el-option :value="vm.bm"  :label="vm.name" v-for="vm in formData['list3']">{{vm.name}}</el-option>
                                </el-select>

                                <el-input  v-model="scope.row.khbh"    style="width:120px;" ></el-input>
                            </el-form>

                        </template>
                        <template v-if="scope.row.kmbm == '1002' " >
                            <el-select  v-model="scope.row.yhzh"  >
                                <el-option  ></el-option>
                                <el-option :value="vm.code_value"  :label="vm.code_name" v-for="vm in formData['listyhzh']">{{vm.code_name}}</el-option>
                            </el-select>
                        </template>
                    </template>

                </el-table-column>
                <el-table-column
                        prop="jfje"
                        width="130px"
                        label="借方金额">
                    <template slot-scope="scope">
                        <el-input  v-model="scope.row.jfje"    style="'width:200px;'" ></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="dfje"
                        width="130px"
                        label="贷方金额">
                    <template slot-scope="scope">
                        <el-input  v-model="scope.row.dfje"    style="'width:200px;'" ></el-input>
                    </template>
                </el-table-column>
            </el-table>
        </template>

        <el-pagination
                background
                @current-change="handleCurrentChange"
                @size-change="sizeChange"
                layout="prev, pager, next,total,sizes"
                :total="total"
                :page-size="pageSize"
                :page-sizes="pageSizes"
        >
        </el-pagination>
    </div>

    <div>
        <div style="padding-top: 20px;text-align: center;">
            <el-button type="primary" size="small" @click="saveDatazancun" >暂存</el-button>
            <el-button type="primary" size="small" @click="tijiaojindie" >提交金蝶</el-button>

        </div>
    </div>


</div>

<script>
    var E = window.wangEditor; // 全局变量
</script>
<script>




    var vm = new Vue({
        el: '#app',
        data: {
            formData:{},
            parmsData:{},
            tableData: [],
            multipleSelection:[],
            total:0,
            pageNumber:1,
            pageSize:10,
            pageSizes:[10,15,20,50,100]
        },
        created(){
            this.parmsData = getParams();
            this.getData();
        },
        methods:{
            //每页记录数改变
            sizeChange(val){
                this.pageSize = val;
                this.getData();
            },
            //开始翻页
            handleCurrentChange(val){
                this.pageNumber = val;
                this.getData();
            },
            // 点击表格行
            rowClick(row) {
                this.$refs.tipsTable.toggleRowSelection(row);
            },
            handleSelectionChange(val){
                this.multipleSelection = [];
                for(let a=0;a<val.length;a++){
                    this.multipleSelection.push(val[a].id);
                }
            },
            //暂存数据
            async saveDatazancun(){
                top.load();
                const res = await postWebCustom(getTableId("969"),this.formData);
                top.layer.closeAll();
                top.alert(res.msg);
            },
            //提交金蝶
            async tijiaojindie(){
                this.$confirm('确定要提交金蝶码?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    load();
                    const res = await postWebCustom(getTableId("970"),{});
                    layer.closeAll();
                    top.alert(res.msg);
                    if(res.code == 1){
                        this.getData();
                    }
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });

            },
            formatProgress(p){
                return p+"%";
            },
            async deleteRows(){
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    top.load();
                    const res = await postWebCustom(getTableId("950"),{ids:""+this.multipleSelection});
                    top.layer.closeAll();
                    top.alert(res.msg);
                    this.getData();
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },
            async getData(){
                top.load();
                const res = await postWebCustom(getTableId("942"),{pageNumber:""+this.pageNumber,pageSize:""+this.pageSize});
                top.layer.closeAll();
                this.tableData = res.data.listmx;
                this.formData = res.data;
                this.total = parseInt(res.data.page.total);
                this.pageSize = parseInt(res.data.page.pageSize);
            },
            openshoukuan(){
                let btn = {
                    btn: ['关闭']
                    , btn2: function (index, layero) {
                        //按钮【按钮二】的回调
                        //return false 开启该代码可禁止点击该按钮关闭
                    }
                };
                top.data.tableId = "yangguangreli-937";
                top.f_layer_open_get("/admin/html/dataManagement/list.html", "90%", "80%", function () {
                    vm.getData();
                }, btn, "选择收款记录");
            },
            openqianfei(){
                let btn = {
                    btn: ['关闭']
                    , btn2: function (index, layero) {
                        //按钮【按钮二】的回调
                        //return false 开启该代码可禁止点击该按钮关闭
                    }
                };
                top.data.tableId = "yangguangreli-938";
                top.f_layer_open_get("/admin/html/dataManagement/list.html", "90%", "80%", function () {
                    vm.getData();
                }, btn, "选择欠费记录");
            },
        },

    })


    //验证必填项
    function verification() {
        let a = 0;
        for(let zygl in vm.formInline){
            let map = vm.formInline[zygl];
            try {
                vm.submitForm("ruleForm",a);
                a++;
            }catch (e){}
        }
        for(let zygl in vm.formInline){
            let map = vm.formInline[zygl];
            for(let key in map){
                try {
                    let value = map[key];
                    if(vm.rules[zygl][key] != undefined && value == ""){
                        top.alert("红*号必输项不能为空!");
                        return false;
                    }
                }catch (e){}
            }

        }
        return true;
    }

    function getData() {
        console.log(vm.formInline)
        return vm.formInline;
    }


    function setData(data) {
        if(Object.keys(data).length > 0){
            vm.formInline = data;
        }

    }
</script>


</body>
</html>
